<template name="businessInfo">
	<view class="theme_bg_vice_color">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList" use-page-scroll>
			<cu-custom :isdw="true" style="position: fixed;top: 0;left: 0;z-index: 100;">
				<block slot="dw">
					<view class="flex" @click="$navigateBack()"><text class="text-bold text-white cuIcon-home" style="font-size: 50rpx;"></text></view>
				</block>
			</cu-custom>
			<swiper class="screen-swiper aef" :circular="true" :autoplay="true" interval="5000" duration="500" style="height: 576rpx;">
				<swiper-item v-for="(item, index) in swiperList" :key="index" @click="previewimage(index)">
					<image :src="$isHttp(item.pictureImg)" mode="aspectFill"></image>
					<!-- <video :src="$isHttp(item.pictureImg)" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video> -->
				</swiper-item>
			</swiper>

			<view class="">
				<view class="padding theme_bg_color">
					<view class="text-xl text-bold text-black">{{ info.name }}</view>
					<view class="text-lg text-black margin-top-xs margin-bottom-sm">{{ info.sex == 0 ? '男' : '女' }} {{ info.constellation }}</view>
					<view class="flex justify-between align-center padding-lr-lg padding-tb-sm margin-xs radius shadow bg-black">
						<view class="flex justify-start">
							<view class="text-bold text-white margin-right-lg" style="font-size: 60rpx;">{{ info.averageScore }}</view>
							<view>
								<view class="text-grey">DM模范指数</view>
								<view>
									<van-rate :value="Number(info.averageScore) / 2" :size="14" allow-half color="#fbbd08" void-color="#adb0b3" void-icon="star" readonly />
								</view>
							</view>
						</view>
						<view class="cu-btn round bg-red xl" @click="scoreShow = true"><text class="lg text-white cuIcon-appreciatefill" style="font-size: 40rpx;"></text></view>
					</view>
				</view>

				<view class="padding-lr-sm padding-tb-sm margin-xs theme_bg_color radius12">
					<view class="text-df text-black text-bold margin-bottom-sm">
						<text class="cuIcon-titles text-black"></text>
						DM简介
					</view>
					<view class="margin-xs" style="color: #a7a7a7;">{{ info.introduction }}</view>
				</view>
				<view class="padding-lr-sm padding-tb-sm margin-xs">
					<view class="text-df text-black text-bold margin-bottom-sm">
						<text class="cuIcon-titles text-black"></text>
						TA会开的剧本
					</view>
					<view class="margin-xs" style="color: #a7a7a7;">
						<view class="cu-card article">
							<view
								@click="$goPage('../../pageB/script/info?id=' + item.playId)"
								class=" shadow padding-sm radius margin-tb-sm"
								style="background-color: #fff;position: relative;"
								v-for="(item, index) in dataList"
								:key="index"
							>
								<!-- <image src="../../static/icon/zd.png" class="zd" mode=""></image> -->
								<view class="flex justify-start">
									<image :src="$isHttp(item.playPicture)" style="width: 160rpx;height: 220rpx;border-radius: 10rpx;" mode="aspectFill"></image>
									<view class=" margin-left-sm" style="width: 520rpx;">
										<view class="flex justify-start margin-top-xs">
											<view class="text-bold" style="color: #000000;">{{ item.playName }}</view>
											<!-- <view class="cu-tag bg-yellow  sm round margin-left-sm">标签666</view> -->
										</view>
										<view class="margin-top-sm">
											<van-rate
												:value="Number(item.playAverageScore) / 2"
												:size="18"
												allow-half
												color="#fbbd08"
												void-color="#adb0b3"
												void-icon="star"
												readonly
											/>
										</view>
										<view class="">
											<view
												v-for="(item1, index1) in item.playSmallClass"
												:key="index1"
												class="cu-tag line-black radius  margin-top-sm"
												style="background-color: #fff;color: #b2b1b6;"
											>
												{{ item1.small_name }}
											</view>
										</view>
										<view class="flex justify-between  margin-top-sm">
											<view class="flex align-end text-yellow">
												<!-- <view class="text-sm ">¥</view>
											<view class="text-lg text-bold">139</view>
											<view class="text-sm ">/位</view> -->
											</view>
											<!-- <view @click="$goPage('../../pageB/script/BeforeAppointment')"
											class="cu-btn bg-yellow sm round text-white">预约</view> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			 <empty-view slot="empty"></empty-view>
		</z-paging>
		<van-popup :show="scoreShow" round @click-overlay="scoreShow = false">
			<view class="text-center padding-tb-xl padding-lr-xl" style="width: 500rpx;height: 400rpx;">
				<view>{{ score * 2 }}分</view>
				<van-rate :value="score" :size="25" allow-half color="#efc429" void-color="#eee" void-icon="star" @change="scoreOnChange" />
				<view style="height: 120rpx;"></view>
				<van-button color="#e54d42" block round size="small" @click="hostScore">提交</van-button>
			</view>
		</van-popup>
	</view>
</template>

<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [ZPagingMixin],
	name: 'hostInfo',
	data() {
		return {
			id: '', //主持人id
			info: '',
			swiperList: [],
			dataList: [],
			score: 0,
			scoreShow: false
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.$u.api
			.getStoreHostCarousel({
				id: this.id
			})
			.then(res => {
				this.swiperList = res.data;
			});
		this.$refs.paging.reload();
	},
	methods: {
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			this.$u.api
				.getHostInfo({
					presentId: this.id,
					page: pageNo,
					number: pageSize
				})
				.then(res => {
					this.info = res.data;
					this.$refs.paging.complete(res.data.list);
				});
		},
		previewimage(index) {
			let imgArry = [];
			for (let i = 0; i < this.swiperList.length; i++) {
				//如果当前
				if (this.swiperList[i].pictureImg != '') {
					imgArry.push(this.$isHttp(this.swiperList[i].pictureImg));
				}
			}
			uni.previewImage({
				current: index,
				urls: imgArry,
				indicator: 'number',
				loop: true,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		//主持人评分
		hostScore() {
			this.$u.api
				.setHostScore({
					userId: this.vuex_user.id,
					presentId: this.id,
					score: this.score * 2
				})
				.then(res => {
					this.scoreShow = false;
					if(res.code===200){
						this.info.averageScore=res.data.score
						this.$successToast(res.message)
					}
				});
		},
		scoreOnChange(e) {
			this.score = e.detail;
		}
	}
};
</script>

<style scoped lang="scss">
swiper {
	box-shadow: 0 0 12px red inset;
}

.zd {
	position: absolute;
	top: 0;
	left: 0;
	width: 60rpx;
	height: 55rpx;
	z-index: 1;
}

// .grarg {
// 	position: absolute;
// 	top: 225rpx;
// 	bottom: 100rpx;
// }

.box_whbrc {
	width: 90rpx;
	height: 60rpx;
	border-radius: 30rpx;
	// background-color: #cfa526;
	margin-right: 20rpx;
	text-align: center;
	line-height: 60rpx;
}

.bgc_cfa526 {
	background-color: #cfa526;
}
</style>
